<template>
  <div class="seekhelp_wrap">
		<y-open-app v-if="seekHelpData.kid" :id="seekHelpData.kid" routerAddr="HotQuestionDetails" passprops="kid"/>
		<div class="question-user">
			<img :src="userData.userImg" class="user-img"/>
			<div class="info">
				<p class="name">{{userData.userNickName}}</p>
				<p class="text">{{seekHelpData.question}}</p>
			</div>
		</div>
		<div class="totor" v-if="seekHelpData.answerVO">
			<div class="totor-img">
				<img :src="answerUserInfoData.userImg" class="user-img">
				<div class="totor-imgbg"></div>
			</div>
			<div class="totor-info">
				<p class="name">{{answerUserInfoData.userNickName}}<span class="assist">{{answerUserInfoData.userRoleTitle}}</span><img src="./assets/totor_badge.png" class="badge"></p>
				<!-- answerType 0音频 1文本 -->
				<p class="info-text" v-if="answerVO.answerType">{{answerVO.answer}}</p>
				<div class="voice-wrap" v-if="!answerVO.answerType">
					<div class="voice-paly" :class="!isPlay ? 'paly' : 'pause'" @click="handleMusic"></div>
					<div class="animation-wrap"  :class="{'animation': isPlay}" ></div>
					<audio :src="answerVO.answer" controls="controls" style="display: none" ref="audio" ></audio>
					<span class="time">{{calcTime}}</span>
				</div>
			</div>
		</div>
		<div class="like-info">
			<span class="iconfont icon-like-new1"></span>
			<p class="text" v-if="seekHelpData.answerVO && answerVO.likeCount > 0">{{seekHelpData.answerVO && answerVO.likeCount}}人点过赞</p>
		</div>
		<y-comment v-if="seekHelpData.kid" :targetKid="$route.params.id"  targetType="question"/>
		<y-viewmore v-if="seekHelpData.kid" :id="seekHelpData.kid" routerAddr="HotQuestionDetails" passprops="kid"/>
	</div>
</template>
<script>
	import YComment from './components/comment'
	import YViewmore from './components/view-more'
	import YOpenApp from './components/open-app'
	let timing = null;
  export default {
    components: {
      YComment, YViewmore, YOpenApp
    },
    data() {
      return {
				seekHelpData: {},
				userData: {},
				commentData: [],
				answerVO: {},
				answerUserInfoData: {},
				isPlay: false,
				duration: 0,
				calcTime: '0',
      }
		},
		methods: {
			handleMusic() {
				if (!this.isPlay) {
					this.isPlay = !this.isPlay;
					timing = setInterval(() => {
						if (this.duration) {
							this.duration--;
							this.transformTime(this.duration)
						} else {
							this.isPlay = !this.isPlay;	
							this.duration = this.answerVO.duration;
							this.transformTime(this.duration)
							clearInterval(timing);
						}
					}, 1000)
					return this.$refs.audio.play();
				} else {
					clearInterval(timing);
					this.isPlay = !this.isPlay;
					return this.$refs.audio.pause();
				}
			},

			transformTime(duration) {
				if (duration >= 60) {
					let minute = parseInt(duration / 60);
					let second = parseInt(duration % 60);
					let minutes = minute < 10 ? `0${minute}` : minute;
					let seconds = second < 10 ? `0${second}` : second;
					return this.calcTime = `${minutes} : ${seconds}`
				} else {
					let minutes = duration < 10 ? `0${duration}` : duration;
					return this.calcTime = `00 : ${minutes}`
				}
			}
		},
		async created() {
			// 321599602515968
			let res = await this.$http(`/lovelorn/v2/pb/question-hots/${this.$route.params.id}`);
			this.seekHelpData = res.data.data;
			this.userData = this.seekHelpData.userSimpleVO;
			this.answerVO = this.seekHelpData.answerVO;
			if (this.answerVO) {
				this.answerUserInfoData = this.answerVO.userSimpleVO;
				this.duration = this.answerVO.duration;
				this.transformTime(this.answerVO.duration);
			}
			
			if (this.$utils.isWeiXin()) {
				this.$utils.wxShare({
					title: this.seekHelpData.question,
					desc: '拾恋APP，口袋里的情感专家',
					link: `${window.location.origin}/seekhelp-share/${this.$route.params.id}`,
					imgUrl: 'https://cdn.yryz.com/lovelorn/image/public/201901/default%403x.png', 
				})
			}
		},
  }

</script>
<style scoped>
  .seekhelp_wrap {
		position: relative;
		min-height: 100vh;

		& .question-user {
			background: #fff;
			display: flex;
			padding: 0.3rem;

			& .user-img {
				width: 0.64rem;
				height: 0.64rem;
				border-radius: 0.64rem;
				background: #eee;
				flex: 0 0 0.64rem;
			}

			& .info {
				color: #000;
				margin-left: 0.2rem;

				& .name {
					display: flex;
					align-items: center;
					font-size: 0.28rem;
					padding-top: 0.16rem;
					font-weight: 700;

					& .label {
						padding: 0.04rem 0.14rem;
						border-radius: 0.05rem;
						border: 1px solid #ff3988;
						font-size: 0.24rem;
						color: #ff3988;
						line-height: 1;
						margin-left: 0.15rem;
						font-weight: 100;
					}
				}

				& .text {
					margin-top: 0.1rem;
					font-size: 0.3rem;
					line-height: 0.46rem;
				}
			}
		}

		& .totor {
			padding: 0.3rem;
			background: #fff;
			display: flex;

			& .totor-img {
				width: 0.84rem;
				height: 0.95rem;
				position: relative;
				flex: 0 0 0.89rem;

				& .user-img {
					width: 0.75rem;
					height: 0.75rem;
					border-radius: 0.38rem;
					overflow: hidden;
					margin-top: 0.1rem;
					margin-left: 0.09rem;
				}
				& .totor-imgbg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: url('./assets/totor_bg.png') no-repeat center;
					background-size: contain;
				}
			}
			& .totor-info {
				margin-left: 0.2rem;
					& .name {
						margin-top: 0.36rem;
						display: flex;
						align-items: center;
						font-size: 0.28rem;
						color: #000;
						font-weight: 700;
					}
					& .assist {
						font-size: 0.2rem;
						color: #666;
						margin-left: 0.14rem;
						font-weight: 100;
					}
					& .badge {
						width: 0.24rem;
						height: 0.24rem;
						margin-left: 0.1rem;
					}

					& .info-text {
						margin-top: 0.1rem;
						font-size: 0.3rem;
						line-height: 0.46rem;
						color: #000;
					}
				}

			& .voice-wrap {
				margin-top: 0.24rem;
				width: 4.56rem;
				height: 0.8rem;
				padding: 0 0.3rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: url('./assets/voice_bg.png') no-repeat center;
				background-size: cover;
				& .voice-paly {
					width: 0.5rem;
					height: 0.5rem;

					&.paly {
						background: url('./assets/voice_play.png') no-repeat center;
						background-size: cover;
					}
					&.pause {
						background: url('./assets/voice_pause.png') no-repeat center;
						background-size: cover;
					}
				}

				& .animation-wrap {
					width: 1.96rem;
					height: 0.37rem;
					background: url('./assets/voice_progress.png') repeat-x ;
					background-size: contain; 
					background-position: 0 0; 
					&.animation {
						animation: voiceAnimation;
						animation-timing-function: linear;
						animation-duration: 100s
					}
				}

				& .time {
					font-size: 0.22rem;
					color: #000;
				}
			}
		}

		& .like-info {
			background: #fff;
			padding: 0.4rem 0 0.5rem; 
			display: flex;
			align-items: center;
			flex-direction: column;
			line-height: 1;
			& .icon-like-new1 {
				font-size: 0.52rem;
				color: #fd528a;
			}
			& .text {
				font-size: 0.2rem;
				color: #666;
				margin-top: 0.12rem;
			}
		}

	}

	@keyframes  voiceAnimation {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 100rem 0;
		}
	}
</style>
